/*
 * @Author: wangtao
 * @Date: 2020-06-29 16:32:41
 * @LastEditors: 汪滔
 * @LastEditTime: 2021-04-15 13:11:14
 * @Description: file content
 */

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Text,
  PixelRatio,
  TouchableOpacity,
  ScrollView,
} from 'react-native';
import {
  mainBgColorWhite,
  screenWidth,
  px2dp,
  fontColorDeepGray,
  fontColorBlack,
  mainBgColorLightGray,
  splitLineColorLightGray,
  fontColorSecDeepGray,
  fontColorLightGray,
} from '@/styles';
import { FormSelect, FormInput, Button } from '@/common';
import { idCardFront, idCardBack } from '@/images';
import CameraCard from '../../components/camera-card';
import Upload from '../../components/upload';

const { Submit } = Button;

export default class CertWrap extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {}

  render() {
    const {
      carOwnerType,
      selectImg,
      drivingFrontUrl,
      drivingAnnexUrl,
      licenseUrl,
      idCardFrontUrl,
      idCardAnnexUrl,
      onChange,
    } = this.props;
    return (
      <>
        <View style={styles.wrap}>
          <View style={styles.drivingWrap}>
            <Text style={styles.drivingTitle}>上传车辆行驶证</Text>
            <View style={styles.drivingLicense}>
              <CameraCard
                title='上传行驶证正本'
                defaultBg={require('../../../../images/wl/driving_license_bg1.png')}
                imgUrl={drivingFrontUrl}
                onCatchImage={() => selectImg('drivingFrontUrl')}
              />
              <CameraCard
                title='上传行驶证副本'
                defaultBg={require('../../../../images/wl/driving_license_bg3.png')}
                imgUrl={drivingAnnexUrl}
                onCatchImage={() => selectImg('drivingAnnexUrl')}
              />
            </View>
          </View>
        </View>
        {carOwnerType.code == 1 && (
          <View style={styles.wrap}>
            <View style={styles.drivingWrap}>
              <Text style={styles.drivingTitle}>
                {carOwnerType.code == 1 ? '添加身份证' : '上传营业执照照片'}
              </Text>
              <View style={styles.drivingLicense}>
                <CameraCard
                  title='点击拍摄或上传人像面'
                  defaultBg={idCardFront}
                  imgUrl={idCardFrontUrl}
                  onCatchImage={() => selectImg('idCardFrontUrl')}
                />
                <CameraCard
                  title='点击拍摄或上传国徽面'
                  defaultBg={idCardBack}
                  imgUrl={idCardAnnexUrl}
                  onCatchImage={() => selectImg('idCardAnnexUrl')}
                />
              </View>
            </View>
          </View>
        )}
        {carOwnerType.code == 2 && (
          <View style={styles.wrap}>
            <View style={styles.drivingWrap}>
              <Text style={styles.drivingTitle}>上传营业执照照片</Text>
              <View style={styles.drivingLicense}>
                <Upload
                  limit={1}
                  action='upload?dirName=insurance'
                  fileList={licenseUrl ? [{ url: licenseUrl }] : []}
                  onChange={(fileList) => {
                    onChange('licenseUrl', fileList[0] ? fileList[0].url : '');
                  }}
                />
              </View>
            </View>
          </View>
        )}
      </>
    );
  }
}
const styles = StyleSheet.create({
  wrap: {
    width: screenWidth,
    backgroundColor: mainBgColorWhite,
    paddingHorizontal: px2dp(32),
    paddingVertical: px2dp(40),
    marginTop: px2dp(24),
  },
  drivingLicense: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  drivingTitle: {
    fontSize: px2dp(28),
    color: fontColorBlack,
    marginBottom: px2dp(40),
  },
});
